<template>
    <view v-if="itemDiplay" class="wy-form-text wy-flex-1" :class="[scrollClass,model.theme.box.class]" :style="model.theme.box.style">
        <template v-if="model.showBox">
            <view class="wy-form-group wy-flex-row wy-position-relative">
                <view class="wy-form-group-min-height"></view>
                <view :class="[model.theme.group.class,model.multiline?'wy-flex-column':'wy-flex-row wy-align-center']" :style="model.theme.group.style" class="wy-flex-1 wy-form-group-content">
                    <view class="wy-form-group-title wy-flex-row  wy-align-center" v-if="model.title" :class="[model.theme.titleBox.class,titleMinWidth,model.multiline?'':'wy-justify-end']" :style="model.theme.titleBox.style">
                        <text class="wy-size-base wy-color-text" :class="[model.theme.title.class]" :style="model.theme.title.style">{{locale(model.title)}}</text> 
                        <text class="wy-size-base wy-color-text" :class="[model.theme.sp.class]" v-if="model.sp">{{model.sp}}</text>
                    </view>
					<view v-if="model.multiline && model.remark" class="wy-flex-column">
						<text class="wy-size-s wy-color-second" v-for="(remark,index) in remarkArr" :key="index">{{remark}}</text>
					</view>
                    <view class="wy-flex-1 wy-flex-row wy-align-center">
                        <view
                            v-if="model.showContent"
                            @click="click" 
                            class="wy-form-group-input wy-flex-row wy-align-center wy-flex-1 wy-border-all-base"
                            :class="[model.theme.input.class,validateClass,model.disabled?'wy-form-group-disabled':'']"
                            :style="model.theme.input.style" 
                        >
                        <!--按照表单默认样式的内容区-->
                        <text class="wy-size-base wy-color-text">按照表单默认样式的内容区</text>
                        <slot></slot>
                        <!----> 
                        </view> 
                        <view @click="unitClick" v-if="showUnit||model.unit.length||model.theme.unit.class||model.theme.unit.style" :class="[model.theme.unit.class]" :style="model.theme.unit.style" class="unit wy-ms-left-s">
                        	<slot name="unit"></slot>
                            <text class="wy-color-text wy-size-base">{{locale(model.unit)}}</text>
                        </view>
                        <view class="wy-ms-left-ss" v-if="model.tip">
                            <wy-icon @iconClicked="showTip" name="warn" type="error"></wy-icon> 
                        </view>
						<view class="wy-ms-left-ss" v-if="!model.multiline && model.remark">
						    <wy-icon @iconClicked="showRemark" name="question" type="error"></wy-icon>
						</view>
                    </view> 
                </view> 
            </view>
        </template>
        <template v-else>
            <!--自定义样式内容区-->
            <text class="wy-size-base wy-color-text">自定义样式内容区</text>
            <slot></slot>
             <!----> 
        </template> 
    </view>
</template>

<script>
    import {wyProps} from '../../libs/props.js';
    import {wyItem} from '../../libs/form.js'; 
    export default { 
         name:'wy-form-demo', 
         mixins: [wyProps,wyItem],
         data(){
             return {
                model:{
                    theme:{
                        box:{class:'',style:''},
                        group:{class:'',style:''}, 
                        titleBox:{class:'',style:''},
                        title:{class:'',style:''},
                        input:{class:'',style:''},
                        sp:{class:'',style:''},
                        unit:{class:'',style:''}
                    },
                    /* 系统内置属性
                    //公共属性
                    uuid:'',//实例key
                    name:'',//表单key 
                    title:'',//标题
                    value:'', //值
                    tip:'',//提示语
                    tipType:'',//提示类型
                    disabled:false,//是否禁用
                    display:true,//是否展示
                    focus:false,//是否有焦点
                    multiline:false,//是否分行
                    //公共事件
                    checkCommit:null,//提交前置条件检查
                    showTip:null,//弹出提示信息
                    callback:null,  //set事件监听 
                    //事件
                    events:{
                        click:null,
                        unitClick:null,
                        input:null
                    }, 
                    //国际化
                    locale:{ //本地化
                    	group:'',
                        file:'',
                    	isContent:true,
                    	open:false
                    },
                    //辅助
                    sp:'',// :标题与值之间分隔符，
                    width:0,//标题最大宽度，0代表自动判断
                    unit:'',//单位
                    placeholder:'',// 
                    */
                    //自定义属性
                    showContent:true,//是否展示内容区
                    showBox:true ,//是否显示内容区 
                }
             }
         }, 
         computed:{ 
             //itemDiplay 组件是否隐藏
             //titleMinWidth //自动计算出来的标题宽度
             //validateClass //触发验证的样式类
         }, 
         methods:{ 
            //mounted事件
            mounted__(){
               // console.log(this.model)
            },
            //locale(key) 国际化方法
            //来自父节点的状态通知
            parentNotice__(e){
                
            },
            //外部设置model事件
            setModel__(model){
                
            },
            //获取值
            getValue__(){
                let {value}=this.model
                return value
            },
            //设置值
            setValue__(value){
                
            },
            //提交前的同步验证
            async checkCommit(option,parent=null,group=''){
            	return new Promise((resolve, reject)=>{
            		resolve({error:[],group})
            	})
            }
             
         }
        
    }
</script>

<style>

</style>
